<template>
  <!-- 属性面板容器 - 用于编辑选中组件的各种属性 -->
  <div class="property-panel">
    <!-- 面板标题区域 -->
    <div class="panel-header">
      <h3>属性面板</h3>
    </div>
    
    <!-- 面板内容区域 -->
    <div class="panel-content">
      <!-- 未选中组件时的提示信息 -->
      <div v-if="!activeComponent" class="no-selection">
        <el-icon><InfoFilled /></el-icon>
        <p>请选择一个组件来编辑属性</p>
      </div>

      <!-- 组件属性编辑区域 - 当有组件被选中时显示 -->
      <div v-else class="property-sections">
        <!-- 基本信息配置区域 -->
        <div class="property-section">
          <div class="section-title">
            <el-icon><Setting /></el-icon>
            <span>基本信息</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <!-- 组件名称输入框 - 可编辑 -->
              <el-form-item label="组件名称">
                <el-input 
                  v-model="activeComponent.name"
                  @input="updateComponent"
                  placeholder="请输入组件名称"
                />
              </el-form-item>
              <!-- 组件ID显示框 - 只读 -->
              <el-form-item label="组件ID">
                <el-input 
                  :value="activeComponent.id"
                  disabled
                  placeholder="组件ID"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 位置和尺寸配置区域 -->
        <div class="property-section">
          <div class="section-title">
            <el-icon><Rank /></el-icon>
            <span>位置和尺寸</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <!-- 坐标位置设置 - 分为两列布局 -->
              <el-row :gutter="3">
                <el-col :span="24">
                  <!-- X坐标输入框 - 控制组件水平位置 -->
                  <el-form-item label="X坐标">
                    <el-input-number 
                      v-model="activeComponent.style.left"
                      @change="updateComponent"
                      :min="0"
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <!-- Y坐标输入框 - 控制组件垂直位置 -->
                  <el-form-item label="Y坐标">
                    <el-input-number 
                      v-model="activeComponent.style.top"
                      @change="updateComponent"
                      :min="0"
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 尺寸设置 - 分为两列布局 -->
              <el-row :gutter="12">
                <el-col :span="24">
                  <!-- 宽度输入框 - 控制组件宽度，最小值20px -->
                  <el-form-item label="宽度">
                    <el-input-number 
                      v-model="activeComponent.style.width"
                      @change="updateComponent"
                      :min="20"
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <!-- 高度输入框 - 控制组件高度，最小值20px -->
                  <el-form-item label="高度">
                    <el-input-number 
                      v-model="activeComponent.style.height"
                      @change="updateComponent"
                      :min="20"
                      :step="1"
                      controls-position="right"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

        <!-- 样式属性配置区域 -->
        <div class="property-section">
          <div class="section-title">
            <el-icon><Brush /></el-icon>
            <span>样式属性</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <!-- 层级设置 - 控制组件在画布上的显示层次 -->
              <el-form-item label="层级">
                <el-input-number 
                  v-model="activeComponent.style.zIndex"
                  @change="updateComponent"
                  :min="1"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
              <!-- 透明度滑块 - 控制组件的透明度，0为完全透明，1为完全不透明 -->
              <el-form-item label="透明度">
                <el-slider 
                  v-model="activeComponent.style.opacity"
                  @change="updateComponent"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :format-tooltip="formatOpacity"
                />
              </el-form-item>
              <!-- 旋转角度设置 - 控制组件的旋转角度，范围-360到360度 -->
              <el-form-item label="旋转角度">
                <el-input-number 
                  v-model="activeComponent.style.rotate"
                  @change="updateComponent"
                  :min="-360"
                  :max="360"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
              <!-- 圆角设置 - 控制组件边框的圆角程度 -->
              <el-form-item label="圆角">
                <el-input-number 
                  v-model="activeComponent.style.borderRadius"
                  @change="updateComponent"
                  :min="0"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 文本属性配置区域 - 仅当选中文本组件时显示 -->
        <div v-if="activeComponent.type === ComponentType.TEXT" class="property-section">
          <div class="section-title">
            <el-icon><EditPen /></el-icon>
            <span>文本属性</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <!-- 文本内容输入框 - 多行文本输入 -->
              <el-form-item label="文本内容">
                <el-input 
                  v-model="activeComponent.config.text"
                  @input="updateComponent"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入文本内容"
                />
              </el-form-item>
              <!-- 字体大小设置 - 范围12-72px -->
              <el-form-item label="字体大小">
                <el-input-number 
                  v-model="activeComponent.config.fontSize"
                  @change="updateComponent"
                  :min="12"
                  :max="72"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
              <!-- 字体颜色选择器 - 支持透明度设置 -->
              <el-form-item label="字体颜色">
                <el-color-picker 
                  v-model="activeComponent.config.fontColor"
                  @change="updateComponent"
                  show-alpha
                />
              </el-form-item>
              <!-- 字体粗细选择器 - 提供多种粗细选项 -->
              <el-form-item label="字体粗细">
                <el-select 
                  v-model="activeComponent.config.fontWeight"
                  @change="updateComponent"
                  style="width: 100%"
                >
                  <el-option label="正常" value="normal" />
                  <el-option label="粗体" value="bold" />
                  <el-option label="更粗" value="bolder" />
                  <el-option label="更细" value="lighter" />
                </el-select>
              </el-form-item>
              <el-form-item label="文本对齐">
                <el-radio-group 
                  v-model="activeComponent.config.textAlign"
                  @change="updateComponent"
                  size="small"
                >
                  <el-radio-button value="left">左对齐</el-radio-button>
                  <el-radio-button value="center">居中</el-radio-button>
                  <el-radio-button value="right">右对齐</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 图片属性 -->
        <div v-if="activeComponent.type === ComponentType.IMAGE" class="property-section">
          <div class="section-title">
            <el-icon><Picture /></el-icon>
            <span>图片属性</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <el-form-item label="图片地址">
                <el-input 
                  v-model="activeComponent.config.src"
                  @input="updateComponent"
                  placeholder="请输入图片URL"
                />
              </el-form-item>
              <el-form-item label="适应方式">
                <el-select 
                  v-model="activeComponent.config.objectFit"
                  @change="updateComponent"
                  style="width: 100%"
                >
                  <el-option label="填充" value="fill" />
                  <el-option label="包含" value="contain" />
                  <el-option label="覆盖" value="cover" />
                  <el-option label="缩小" value="scale-down" />
                  <el-option label="无" value="none" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 边框属性 -->
        <div v-if="activeComponent.type === ComponentType.BORDER" class="property-section">
          <div class="section-title">
            <el-icon><Grid /></el-icon>
            <span>边框属性</span>
          </div>
          <div class="section-content">
            <el-form label-width="80px" size="small">
              <el-form-item label="边框类型">
                <el-select 
                  v-model="activeComponent.config.borderType"
                  @change="updateComponent"
                  style="width: 100%"
                >
                  <el-option label="实线" value="solid" />
                  <el-option label="虚线" value="dashed" />
                  <el-option label="点线" value="dotted" />
                  <el-option label="双线" value="double" />
                </el-select>
              </el-form-item>
              <el-form-item label="边框宽度">
                <el-input-number 
                  v-model="activeComponent.config.borderWidth"
                  @change="updateComponent"
                  :min="1"
                  :max="20"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="边框颜色">
                <el-color-picker 
                  v-model="activeComponent.config.borderColor"
                  @change="updateComponent"
                  show-alpha
                />
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 图表配置 -->
        <div v-if="isChartComponent" class="property-section">
          <div class="section-title">
            <el-icon><TrendCharts /></el-icon>
            <span>图表配置</span>
          </div>
          <div class="section-content">
            <el-button @click="openChartEditor" type="primary" size="small" style="width: 100%">
              编辑图表配置
            </el-button>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="property-section">
          <div class="section-title">
            <el-icon><Operation /></el-icon>
            <span>操作</span>
          </div>
          <div class="section-content">
            <el-space direction="vertical" style="width: 100%">
              <el-button @click="copyComponent" size="small" style="width: 100%">
                复制组件
              </el-button>
              <el-button @click="deleteComponent" type="danger" size="small" style="width: 100%">
                删除组件
              </el-button>
            </el-space>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表编辑器对话框 -->
    <el-dialog 
      v-model="chartEditorVisible"
      title="图表配置编辑器"
      width="80%"
      :before-close="handleChartEditorClose"
    >
      <div class="chart-editor">
        <el-input 
          v-model="chartConfigText"
          type="textarea"
          :rows="20"
          placeholder="请输入图表配置JSON"
        />
      </div>
      <template #footer>
        <el-button @click="chartEditorVisible = false">取消</el-button>
        <el-button @click="applyChartConfig" type="primary">应用配置</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  InfoFilled, Setting, Rank, Brush, EditPen, Picture, Grid, 
  TrendCharts, Operation 
} from '@element-plus/icons-vue'
import { useCanvasStore } from '@/stores/canvas'
import { ComponentType } from '@/types'

const canvasStore = useCanvasStore()

// 当前激活的组件
const activeComponent = computed(() => canvasStore.activeComponent)

// 判断是否为图表组件
const isChartComponent = computed(() => {
  if (!activeComponent.value) return false
  return [
    ComponentType.BAR_CHART,
    ComponentType.LINE_CHART,
    ComponentType.PIE_CHART,
    ComponentType.RADAR_CHART
  ].includes(activeComponent.value.type)
})

// 图表编辑器
const chartEditorVisible = ref(false)
const chartConfigText = ref('')

// 格式化透明度显示
const formatOpacity = (value: number) => {
  return `${Math.round(value * 100)}%`
}

// 更新组件
const updateComponent = () => {
  if (!activeComponent.value) return
  
  canvasStore.updateComponent(activeComponent.value.id, {
    ...activeComponent.value
  })
}

// 复制组件
const copyComponent = () => {
  if (!activeComponent.value) return
  
  canvasStore.copyComponent(activeComponent.value.id)
  ElMessage.success('组件复制成功')
}

// 删除组件
const deleteComponent = async () => {
  if (!activeComponent.value) return
  
  try {
    await ElMessageBox.confirm(
      '确定要删除这个组件吗？此操作不可恢复。',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    canvasStore.removeComponent(activeComponent.value.id)
    ElMessage.success('组件删除成功')
  } catch {
    // 用户取消操作
  }
}

// 打开图表编辑器
const openChartEditor = () => {
  if (!activeComponent.value || !activeComponent.value.config.chartOption) return
  
  chartConfigText.value = JSON.stringify(activeComponent.value.config.chartOption, null, 2)
  chartEditorVisible.value = true
}

// 应用图表配置
const applyChartConfig = () => {
  if (!activeComponent.value) return
  
  try {
    const config = JSON.parse(chartConfigText.value)
    
    canvasStore.updateComponent(activeComponent.value.id, {
      config: {
        ...activeComponent.value.config,
        chartOption: config
      }
    })
    
    chartEditorVisible.value = false
    ElMessage.success('图表配置更新成功')
  } catch (error) {
    ElMessage.error('JSON格式错误，请检查配置')
  }
}

// 处理图表编辑器关闭
const handleChartEditorClose = (done: () => void) => {
  done()
}

// 监听激活组件变化，重置图表配置文本
watch(activeComponent, (newComponent) => {
  if (newComponent && newComponent.config.chartOption) {
    chartConfigText.value = JSON.stringify(newComponent.config.chartOption, null, 2)
  }
})
</script>

<style scoped>
.property-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
}

.no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  text-align: center;
}

.no-selection .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-selection p {
  margin: 0;
  font-size: 14px;
}

.property-sections {
  padding: 20px;
}

.property-section {
  margin-bottom: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.section-title .el-icon {
  margin-right: 8px;
  font-size: 16px;
  color: var(--primary-color);
}

.section-content {
  padding-top: 8px;
}

.chart-editor {
  margin: 16px 0;
  background-color: #333;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  color: var(--text-secondary);
  font-size: 12px;
}

:deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}

:deep(.el-input__wrapper:hover) {
  border-color: var(--primary-color);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

:deep(.el-input__inner) {
  color: var(--text-color);
}

:deep(.el-textarea__inner) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
  color: var(--text-color);
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.05);
}

:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-slider__bar) {
  background-color: var(--primary-color);
}

:deep(.el-radio-button__inner) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
  color: var(--text-color);
}

:deep(.el-radio-button__original:checked + .el-radio-button__inner) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
</style>